<template>
  <div class="evaluate">
    <div class="pingjia">
      <ul>
        <li>商品评价(100)</li>
        <li class="good">好评率100%></li>
      </ul>
    </div>
    <div class="content" v-for="item in data" :key="item.productId">
      <div class="header">
        <p class="photo">
          <img :src="item.userImg" alt />
        </p>
        <p>{{ item.nickname }}</p>
        <p class="comment">{{ item.commContent }}</p>
      </div>
      <el-rate
        v-model="value"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
        class="star"
      >
      </el-rate>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
  name: "TopicEvaluate",
  data() {
    return {
      value: 5,
      sel: [],
    };
  },
  created() {
    console.log(this.data, "ssss");
  },
};
</script>

<style scoped>
.pingjia {
 /* text-align: center; */
 /* display: flex; */
  height: 6vh;
  line-height: 6vh;
  border-bottom: 0.5vh solid #e1e1e1;
}
.pingjia li{
  margin-left: 2vw;
}
.good {
  float: right;
  margin-right: 2vw;
  margin-top: -6vh;
  color: red;

}
.evaluate {
   width: 96vw;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 1vh;
  background: #fff;
}
/* 评论内容 */
.content {
  width: 96vw;
  margin: 0 auto;
  border-radius: 10px;
  height: 11vh;
  background: #fff;
  /* line-height: 14vh; */
}
.comment {
  position: absolute;
  left: 14vw;
  bottom: -3vh;
  width: 71vw;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*禁止换行*/
  text-overflow: ellipsis; /*省略号*/
  color: #3a3737;
  font-size: 12px;
}

.header {
  display: flex;
  align-items: center;
  padding-left: 2vw;
  position: relative;
  margin-top: 2vh;
}
.header p {
  font-size: 14px;
  margin-left: 3vw;
}
/* 头像 */
.photo img {
  width: 5vh;
  height: 5vh;
  border-radius: 10px;
}
.photo{
  width: 5vh;
  height: 5vh;
  border-radius: 10px;
}
.star {
  float: right;
  margin-right: 2vw;
  margin-top: -5vh;
}
</style>